<template>
  <div class="group-item">
    <div class="group-item-chart" :id="'charts' + index"></div>
  </div>
</template>
<script>
window.wx = {};
export default {
  props: {
    index: {
      type: Number,
      default: 0,
    },
    option: {
      type: Object,
      default() {
        return {};
      },
    },
    chartData: {
      type: Array,
      default() {
        return [];
      },
    },
    indicator: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  methods: {
    // 获取需要生成图表的元素
    // 以下是一些常用的配置参数 都有写明详细的注释
    initChart() {
      let myEcharts = null;
      let ids = "charts" + String(this.index);
      myEcharts = this.$echarts.init(document.getElementById(ids));
      let option = {
        color: ["#FFA939"],
        radar: [
          {
            indicator: this.indicator,
            center: ["50%", "50%"],
            radius: 51,
            startAngle: 90,
            splitNumber: 4,
            shape: "circle",
            name: {
              formatter: "{value}",
              textStyle: {
                fontSize: 16,
                color: "#333333",
              },
            },
            splitArea: {
              show: false,
            },
            // 设置雷达图中间射线的颜色
            axisLine: false,
            splitLine: {
              lineStyle: {
                color: "#D5D5D6",
                type: "dotted", //dashed  solid dotted 射线类型【实线 虚线】
              },
            },
          },
          {
            indicator: [
              {
                max: 1000000,
              },
            ],
            center: ["50%", "50%"],
            radius: 51,
            startAngle: 90,
            splitNumber: 1,
            shape: "circle",
            name: {},
            splitArea: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "#FFBF02",
                type: "solid",
                width: 2,
              },
            },
          },
        ],
        series: [
          {
            type: "radar",
            emphasis: {
              lineStyle: {
                width: 4,
              },
            },

            data: this.chartData,
          },
        ],
        silent: true,
      };
      // let option = {
      // 	color: ['#FFBF02', '#FFE434'],
      // 	radar: [{

      // 			triggerEvent: true, //打开响应
      // 			name: {
      // 				textStyle: {
      // 					padding: [-5, -6], // 控制文字padding
      // 					color: "#333",
      // 					fontSize: 14
      // 				}
      // 			},
      // 			indicator: this.indicator,
      // 			center: ['50%', '50%'],
      // 			radius: 55,
      // 			startAngle: 90,
      // 			splitNumber: 4,
      // 			shape: 'circle',

      // 			splitArea: {
      // 				areaStyle: {
      // 					color: ['transparent', 'transparent', 'transparent', 'transparent'],
      // 		shadowColor: 'rgba(0, 0, 0, 0.2)',
      // 		shadowBlur: 10
      // 	}
      // },

      // axisLine: {
      // 	lineStyle: {
      // 		color: '#ECF0F3'
      // 	}
      // },
      // splitLine: {
      // 	lineStyle: {
      // 		color: '#E0E0DD',
      // 		type: 'dotted',
      // 	}
      // },
      // splitArea: {
      // 	show: true,
      // 	areaStyle: {
      // 		color: 'transparent',
      // 		// 这里设置实线
      // 		borderWidth: 1,
      // 		borderColor: 'red'
      // 				}
      // 			},
      // 			axisName: {
      // 				color: "rgba(249, 193, 193, 1)",
      // 				fontSize: 19
      // 			}
      // 		},

      // 	],
      // 	series: [{
      // 		type: 'radar',
      // 		emphasis: {
      // 			lineStyle: {
      // 				width: 4
      // 			}
      // 		},
      // 		data: this.chartData
      // 	}],
      // 	silent: true
      // }
      if (myEcharts) {
        myEcharts.setOption(option);

        // myEcharts.on('click', function (params) {
        //   debugger
        //     var id = params.text;
        //     console.log("===option.radar.indicator",option.radar.indicator)
        //     for (let i = 0; i < option.radar.indicator.length; i++) {
        //         if (id == option.radar.indicator[i].text) {
        //             console.log('===option.radar.indicator[i].name',option.radar.indicator[i].text)
        //             option.radar.indicator[i].color = "#FFBF02";
        //         } else
        //             option.radar.indicator[i].color = "";
        //
        //     }
        //
        //     console.log(option.radar.indicator);//控制台观察
        //     myEcharts.setOption(option);
        //     //line_effect(parseInt(params.name));联合其他图表响应
        //
        // });
      }
      console.log(this.index);
      myEcharts.on("click", function (params) {
        console.log(params.name);
      });
      console.log("===echarts", myEcharts);
      window.addEventListener("resize", function () {
        myEcharts.resize();
      });
    },
  },

  // 然后在mounted里调用该方法就可以了
  mounted() {
    this.initChart();
  },
};
</script>
<style lang="scss" scoped>
.group-item {
  width: 100%;
  height: 387rpx;
  margin-top: 30rpx;

  .group-item-chart {
    width: 100%;
    height: 100%;
  }
}
</style>
